
<template>
  <div>
    <!-- 购物车 -->
    <van-empty
      v-show="bgc"
      class="custom-image empty"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
    />

    <!-- 全选 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="all()" :disabled="isCheckbox=='true'" v-model="checked">全选</van-checkbox>
      <template #tip>
        <!-- style="vertical-align: middle;"  让按钮和span对齐 -->
        <span style="vertical-align: middle;" class="finish">累计共{{cartTotal.goodsCount}}件商品，可点击</span>
        <van-button style="vertical-align: middle;" class="edit" @click="editshop()" v-show="edit=='true'" type="primary">编辑</van-button>
        <van-button style="vertical-align: middle;" class="edit" @click="finish()"  v-show="edit=='false'" type="danger">完成</van-button>
        <span style="vertical-align: middle;" class="finish">按钮进行商品数量修改</span>
      </template>
    </van-submit-bar>

    <!-- 上面轮播 -->
    <van-notice-bar left-icon="volume-o" text="欢迎来到全球最大的购物平台，这里有成千上万的好物，选择你最喜欢的商品带回家吧！" />

    <!-- 商品遍历 -->
    <div v-for="(item,index) in cartList.cartList" :key="index" class="shangpin">
      <!-- 复选框 -->
      <van-checkbox :disabled="isCheckbox=='true'" class="fuxuan" @input="fuxuan(item)" v-model="item.checked"></van-checkbox>

      <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price.toFixed(2)"
          :desc="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
          :controls="false"
        >
          <!-- + -按钮 -->
          <template class="a-remove" v-if="isShow=='true'" #num>
            <van-stepper input-width="25px" button-size="20px"  class="a-remove"  @change="num(item)" v-model="item.number" />
          </template>
        </van-card>

        <template #right>
          <van-button
            square
            text="删除"
            @click="del(item.product_id)"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  GetCartIndex,
  GetCartDel,
  GetCartCheck,
  GetCartUpdate
} from "@/request/api.js";
export default {
  data() {
    return {
      checked: "",
      cartList: [],
      ids: "",
      value: 1,
      isShow: "false",
      cartTotal: "",
      cartCheck: "",
      isChecked: "",
      product_id: "",
      bgc: "",
      edit: "true",
      isCheckbox:'false'
    };
  },
  methods: {
    // 完成编辑
    finish(){
      this.isShow = "false";
      this.edit='true'
       this.isCheckbox='false'
    },
    // 编辑按钮
  editshop() {
      this.isShow = "true";
      this.edit='false';
      this.isCheckbox='true'
    },
    // 商品步进器
    num(item) {
      // console.log(item);
      let numid = item.id;
      let numgoosid = Number(item.goods_id);
      let numnumber = item.number;
      let numproductId = item.product_id;
      // console.log(typeof numid,typeof numgoosid,typeof numnumber,typeof numproductId);
      GetCartUpdate({
        goodsId: numgoosid,
        id: numid,
        number: numnumber,
        productId: numproductId
      }).then(res => {
        this.live();
      });
    },
    // 全选
    all() {
      this.isChecked = this.checked ? "1" : "0";
      let productIdAllList = [];
      // 拿到所有商品的id
      this.cartLists.forEach(item => {
        productIdAllList.push(item.product_id.toString());
      });
      // 用，隔开所有商品id
      this.product_id = productIdAllList.join(",");
      this.xuanzhong();
    },
    // 复选框
    fuxuan(v) {
      // 获取选中状态
      this.isChecked = v.checked ? "1" : "0";
      // 获取选中商品的id
      this.product_id = v.product_id.toString();
      this.xuanzhong();
    },
    // 复选框选中状态
    xuanzhong() {
      GetCartCheck({
        isChecked: this.isChecked,
        productIds: this.product_id
      }).then(res => {
        this.cartCheck = res.data.cartTotal;
        if (res.errno === 0) {
          this.live();
        }
      });
    },
    // 轻提醒
    onSubmit() {
      Toast("该功能暂未开放");
    },
    // 删除商品
    del(a) {
      let id = a.toString();
      GetCartDel({ productIds: id }).then(res => {
        this.$router.go(0);
      });
    },
    // 直接执行的生命周期
    live() {
      GetCartIndex().then(res => {
        this.cartList = res.data;
        this.cartLists = res.data.cartList;
        this.cartTotal = res.data.cartTotal;

        // 如果有选中的商品  判断全选按钮
        if (this.cartTotal.checkedGoodsCount > 0) {
          // 选中的商品数量===购物车内的所有商品总数量 时候，全选按钮就会被选中
          if (this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount) {
            this.checked = true;
          } else {
            //不相等的时候，全选按钮就不会被选中
            this.checked = false;
          }
        } else {
          // 如果没有选中的商品，全选按钮就不会被选中
          this.checked = false;
        }

        // 如果购物车有内容，背景图消失
        if (res.data.cartList.length > 0) {
          this.bgc = false;
        } else {
          this.bgc = true;
        }
      });
    }
  },
  components: {},

  created() {
    this.live();
  }
};
</script>

<style lang='less'  scoped>
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.empty {
  position: absolute;
  top: 40%;
  left: 50%;
  translate: -50% -50%;
}
//全选调位置
.van-submit-bar {
  bottom: 0.5rem;
}
// 编辑按钮
.edit {
  font-size: 0.06rem;
  height: 0.3rem;
  width: 0.59rem;
}
// 商品遍历
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
// 商品遍历  复选框和卡片 flex
.shangpin {
  display: flex;
}
.van-swipe-cell {
  width: 100%;
  z-index: 0;
}
//复选框
.fuxuan {
  z-index: 10;
  padding: 0 0.1333rem;
  background-color: #fff;
}
// + -按钮大小
// .a-remove{
//   height: .2667rem;
//   width: 1.0667rem;
//   background-color: red;
//   // font-size: .1333rem;
// }
</style>
